<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="static/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
		<link href="static/css/common.css" rel="stylesheet">

	</head>
	<body>
		<div id="app">
			<el-container style="height: 100%; border: 1px solid #eee">
				<el-header style="text-align: right; font-size: 12px;">
					<el-row>
					  <el-col  :md="18"style="text-align: center;font-size: 2em;font-weight: 900;" >管理系统</el-col>
					  <el-col  :md="6">
						  <el-dropdown>
						  	<i class="el-icon-setting" style="margin-right: 15px"></i>
						  	<el-dropdown-menu slot="dropdown">
						  		<el-dropdown-item>查看</el-dropdown-item>
						  		<el-dropdown-item>新增</el-dropdown-item>
						  		<el-dropdown-item>删除</el-dropdown-item>
						  	</el-dropdown-menu>
						  </el-dropdown>
						  <span>王小虎</span>
						  
					  </el-col>
					  
					</el-row>
					
				</el-header>
				<el-main>
					<el-container>
					
						<el-aside>
							<el-menu :default-openeds="['1', '3']">
								<el-submenu index="1">
									<template slot="title"><i class="el-icon-message"></i>导航一</template>
									<el-menu-item-group>
										<template slot="title">分组一</template>
										<el-menu-item index="1-1">选项1</el-menu-item>
										<el-menu-item index="1-2">选项2</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="分组2">
										<el-menu-item index="1-3">选项3</el-menu-item>
									</el-menu-item-group>
									<el-submenu index="1-4">
										<template slot="title">选项4</template>
										<el-menu-item index="1-4-1">选项4-1</el-menu-item>
									</el-submenu>
								</el-submenu>
								<el-submenu index="2">
									<template slot="title"><i class="el-icon-menu"></i>导航二</template>
									<el-menu-item-group>
										<template slot="title">分组一</template>
										<el-menu-item index="2-1">选项1</el-menu-item>
										<el-menu-item index="2-2">选项2</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="分组2">
										<el-menu-item index="2-3">选项3</el-menu-item>
									</el-menu-item-group>
									<el-submenu index="2-4">
										<template slot="title">选项4</template>
										<el-menu-item index="2-4-1">选项4-1</el-menu-item>
									</el-submenu>
								</el-submenu>
								<el-submenu index="3">
									<template slot="title"><i class="el-icon-setting"></i>导航三</template>
									<el-menu-item-group>
										<template slot="title">分组一</template>
										<el-menu-item index="3-1">选项1</el-menu-item>
										<el-menu-item index="3-2">选项2</el-menu-item>
									</el-menu-item-group>
									<el-menu-item-group title="分组2">
										<el-menu-item index="3-3">选项3</el-menu-item>
									</el-menu-item-group>
									<el-submenu index="3-4">
										<template slot="title">选项4</template>
										<el-menu-item index="3-4-1">选项4-1</el-menu-item>
									</el-submenu>
								</el-submenu>
							</el-menu>
						</el-aside>
						<el-main>
							<el-table :data="tableData">
								<el-table-column prop="date" label="日期" width="140">
								</el-table-column>
								<el-table-column prop="name" label="姓名" width="120">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
							</el-table>
						</el-main>
					</el-container>
				</el-main>
				<el-footer style="position: fixed;bottom: 0px;width: 100%;">Footer</el-footer>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				const item = {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				};
				return {
					visible: false,
					tableData: Array(20).fill(item)
				}
			},
			methods: {
				open() {
					this.$alert('这是一段内容', '标题名称', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
				}
			}
		})
	</script>
</html>
